<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件模态框一般用于弹出提示信息，让用户确认下一步的操作或者提示用户操作结果。
		</demo-desc>
		<fu-section title="基础案例" type="line">
			<fu-cell-group>
				<fu-cell customStyle="padding: 10px 0;" :title="item.title" :isLink="true" v-for="(item,index) in list" :key="index" @click="list[index][`modalRef${index + 1}`].open()"></fu-cell>
			</fu-cell-group>
		</fu-section>
		
		<fu-modal ref="modalRef1" :content="content" title="标题" @confirm="confirm" @close="close" />
		<fu-modal ref="modalRef2" :content="content" @confirm="confirm" @close="close" />
		<fu-modal ref="modalRef3" :content="content" showCancelButton @confirm="confirm" @cancel="cancel" @close="close" />
		<fu-modal ref="modalRef4" :content="content" showCancelButton asyncClose @confirm="confirm4" @cancel="cancel" @close="close" />
		<fu-modal ref="modalRef5" :content="content" showCancelButton buttonReverse @confirm="confirm" @cancel="cancel" @close="close" />
		<fu-modal ref="modalRef6" :content="content" title="标题" :isMaskClick="false" @confirm="confirm" @close="close" />
		<fu-modal ref="modalRef7" title="FusionsUI, UniApp生态打造" @confirm="confirm" @close="close">
			<view class="head-box__logo">
				<fu-image width="80px" height="80px" :src="$mAssetsPath.appLogo"></fu-image>
			</view>
		</fu-modal>
		<fu-modal ref="modalRef8" title="标题" :content="content" showCancelButton @close="close">
			<template v-slot:confirmButton>
				<view style="padding: 0px 25px 15px 25px;">
					<fu-button shape="round" @click="confirmClickHandler">确定</fu-button>
				</view>
			</template>
		</fu-modal>
	</view>
</template>

<script setup>
	import { getCurrentInstance, ref } from 'vue';
	
	// data数据
	const instance = getCurrentInstance();
	const { $mUtils, $mAssetsPath } = instance.appContext.config.globalProperties;
	const modalRef1 = ref();
	const modalRef2 = ref();
	const modalRef3 = ref();
	const modalRef4 = ref();
	const modalRef5 = ref();
	const modalRef6 = ref();
	const modalRef7 = ref();
	const modalRef8 = ref();
	const content = '模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作';
	let list = ref([
		{ title: '基础使用', modalRef1 }, 
		{ title: '无标题', modalRef2 }, 
		{ title: '带取消按钮', modalRef3 }, 
		{ title: '异步关闭', modalRef4 }, 
		{ title: '对调取消和确认按钮', modalRef5 }, 
		{ title: '禁止点击遮罩关闭', modalRef6 }, 
		{ title: '传入slot', modalRef7 }, 
		{ title: '自定义按钮', modalRef8 }
	]);
	
	// methods方法
	const confirmClickHandler = () => {
		modalRef8.value.close();
	};
	
	const confirm = () => {
		console.log('confirm');
	};
	
	const confirm4 = () => {
		setTimeout(() => {
			modalRef4.value.close();
		}, 2000)
	};
	
	const cancel = () => {
		console.log('cancel');
	};
	
	const close = () => {
		console.log('close');
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}
	
	.head-box {
		padding: 24px;
		
		&__logo {
			background-color: $bg-color-2979ff;
			border-radius: 10px;
		}
	}
</style>